<template>
  <div class="app-container layout-container" ref="el">
    <Breadcrumb />
    <div class="container">
      <div class="side app-container">
        <CustomTitle title="合同配置" />
        <Tree :treeData="treeData" v-model:value="activeTree" @change="changeTreeActive" />
      </div>
      <div class="table">
        <component :is="(components as any)[activeComponent]" :contract-config="contractConfig"></component>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
import Tree from "./components/Tree.vue";
import BaseConfig from "./components/contractConfig/index.vue";
import ContractDisplayConfig from "./components/contractDisplayConfig/index.vue";
import ContractApprovalConfig from "./components/contractApprovalConfig/index.vue";
import { useUserStore } from "@/stores";

const userStore = useUserStore();

/**
 * @description 侧边栏组件
 */
const components = {
  BaseConfig,
  ContractDisplayConfig,
  ContractApprovalConfig
};
/**
 * @description 侧边栏选中
 */
const activeTree = ref<string>("BaseConfig");
const activeComponent = ref("BaseConfig");
/**
 * @description 侧边栏数据
 */
const treeData = ref([
  {
    title: "合同类型配置",
    key: "BaseConfig"
  },
  {
    title: "合同展示设置",
    key: "ContractDisplayConfig"
  },
  {
    title: "合同审批配置",
    key: "ContractApprovalConfig",
    formId: `form-contract-apply-${userStore.userInfo?.tenantId}`
  }
]);
/**
 * @description 侧边栏选中事件
 */
const contractConfig = ref({});
const changeTreeActive = (selectedKeys: string) => {
  if (selectedKeys) {
    activeTree.value = selectedKeys;
    activeComponent.value = selectedKeys;
    if (selectedKeys === "ContractApprovalConfig") {
      const formId = treeData.value.find((item: any) => item.key === selectedKeys)?.formId;
      contractConfig.value = {
        formId
      };
    }
  }
};
</script>

<style scoped lang="scss">
@import "index";
</style>
